<template>
	<view class="pages"> 
		<view class="top">
			<view class="text">
				倒计时：
			</view>
			<view class="progress">
				<view class="nei"></view>
			</view>
		</view>
		<view class="boll">
			<image src="../../static/ihgPic/blue.png" mode="" class="img1"></image>
			<image src="../../static/ihgPic/red.png" mode="" class="img2"></image>
			<image src="../../static/ihgPic/pink2.png" mode="" class="img3"></image>
			<image src="../../static/ihgPic/green.png" mode="" class="img4"></image>
		</view>
		<image src="../../static/ihgPic/boom2.png" mode="" class="boom" @click="handleBoom"></image>
		<view class="word">洲际酒店集团招聘中文网站www.ihgjobs.cn提供应聘者在IHG最新就业机会</view>
	</view>
</template>

<script setup>
	const handleBoom = () => {
		uni.navigateTo({
			url:'/pages/two-balloon02/two-balloon02'
		})
	}
</script>

<style>
	 .pages{
	 		display: flex;
	 		flex-direction: column;
	 		align-items: center;
	 		flex-wrap: nowrap;
	 		/* justify-content: center; */
	 		background-image: url(../../static/ihgPic/bk5.png);
	 		width: 100%;
	 		height: 100vh;
	 		background-size: cover;
	 	}
	 	.top{
	 		display: flex;
	 		align-items: center;
	 		justify-content: center;
	 		width: 100%;
	 		height: 120rpx;
	 	}
	 	.text{
	 		font-size: 40rpx;
	 		color: #fff;
	 	}
	 	.progress{
	 		width: 500rpx;
	 		/* background-color: #fff; */
	 		border: 5px solid #fff;
	 		margin-top: 5px;
	 		border-radius: 20px;
	 		padding: 5rpx 5rpx;
	 	}
	 	.nei{
	 		width: 100rpx;
	 		height: 6px;
	 		background-color: #fff;
	 		border-radius: 5px;
	 	}
	 	.boll{
	 		width: 100%;
	 		flex-grow: 1;
	 		display: flex;
	 		flex-wrap: nowrap;
	 		margin-left: 60px;
	 		margin-top: 105px;
	 		position: relative;
	 	}
	 	.img1{
	 		width: 145rpx;
	 		height: 545rpx;
	 		position: absolute;
	 		margin-left: 51px;
	 		margin-top: 52px;
	 		z-index: 99;
	 	}
	 	.img2{
	 		width: 145rpx;
	 		height: 545rpx;
	 		position: absolute;
	 		margin-left: 90px;
	 	}
	 	.img3{
	 		width: 145rpx;
	 		height: 545rpx;
	 		position: absolute;
	 		margin-left: 162px;
	 		margin-top: 30px;
	 		z-index: 99;
	 }
	 	.img4{
	 		width: 145rpx;
	 		height: 545rpx;
	 		position: absolute;
	 		margin-left: 120px;
	 		margin-top: 90px;
	 	}
		.boom{
			width: 330px;
			position: absolute;
			margin-top: 165px;
			z-index: 999;
		}
		.word{
			position: absolute;
			margin-top: 310px;
			z-index: 9991;
			width: 180px;
			font-size: 13px;
			color: #fff;
			position: absolute;
		}
</style>
